<template>
  <div>
    <div id="background1">
      <div id="contain">
        <h1>--注 册--</h1>
        <div class="form">
          <label>用户名：</label><input type="text" v-model.trim="name" placeholder="请输入用户名"><br/>
        </div>
        <div class="form">
          <label>密码：</label><input type="password"
                                     v-model.trim="password"
                                     placeholder="请输入密码"
                                     autocomplete="off"/><br/>
        </div>
        <div class="form">
          <label>邮箱：</label><input type="email" v-model.trim="mail" placeholder="请输入邮箱"><br/>
        </div>
        <div class="form">
          <label>手机号：</label><input type="tel" v-model.trim="tel" placeholder="请输入手机号"><br/>
        </div>
        <button @click.prevent="handlefinish">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SeismRegister',
    props: {
      msg: String
    },
    data(){
      return{
        name: "",
        password: "",
        mail: "",
        tel: ""
      };
    },methods:{
      open1(msg) {
        this.$notify({
          title: msg,
          message: '这是一条成功的提示消息',
          type: 'success'
        });
      },
      open2(msg) {
        this.$notify({
          title: msg,
          message: '这是一条警告的提示消息',
          type: 'warning'
        });
      },
      open4(msg) {
        this.$notify.error({
          title: msg,
          message: '这是一条错误的提示消息'
        });
      },
      //点击完成按钮触发handlefinish -- 注册
      handlefinish() {
        // if(sessionStorage['name'] === this.name) {
        //   this.open2("用户存在");//如果用户名已存在则无法注册
        // } else
        if(this.name === '') {
          this.open4("用户名不能为空");
        } else if(this.tel === '') {
          this.open4("号码格式错误!");
        } else{//将新用户信息存储到localStorage
          this.$axios.post('/api/user/register', {
              "userName": this.name,
              "userPassword": this.password,
              "userEmail": this.mail,
              "userPhone": this.tel
          }).then(res =>{
            if(res.data.code === 200) {
              sessionStorage.setItem('s', "false");
              this.open1("注册成功"); // 注册成功弹窗
              this.$router.replace('/login');//完成注册后跳转至登录页面
            }else {
              this.open2("用户名已存在");
            }
          }).catch(error =>{
            console.log(error);
            this.open4("系统出错了")
          })
        }
      }
    }
  }
</script>

<style scoped>
@import "../assets/css/SeismRegister.css";
</style>